<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D Photo Wall</title>
<style type="text/css">
*{margin:0;padding:0;}
img{width:200px;height:120px;}
.stage{
    position: relative;
    perspective: 1600px;margin: 20px auto;width: 800px;
	
}
.container {
   transform-style: preserve-3d;

}
.side {
    width: 200px;
    height: 120px;
    position: absolute;  //定位
	top: 160px;
    left: 300px;
}
.item1{transform: rotateY(0deg) translateZ(300px);}
.item2{transform: rotateY(45deg) translateZ(300px);}
.item3{transform: rotateY(90deg) translateZ(300px);}
.item4{transform: rotateY(135deg) translateZ(300px);}
.item5{transform: rotateY(180deg) translateZ(300px);}
.item6{transform: rotateY(225deg) translateZ(300px);}
.item7{transform: rotateY(270deg) translateZ(300px);}
.item8{transform: rotateY(315deg) translateZ(300px);}
@keyframes spin{
	0%{transform:rotateY(0deg)}
	100%{transform:rotateY(360deg)}
}
.container{
	-moz-animation:spin 15s linear infinite;
	-o-animation:spin 15s linear infinite;
	-webkit-animation:spin 15s linear infinite;
	animation:spin 15s linear infinite;
}
</style>
</head>
<body>
<div class="stage">
	<div id="container" class="container">
		<div class="side item1"><img src="../images/1.jpg" /></div>
		<div class="side item2"><img src="../images/2.jpg" /></div>
		<div class="side item3"><img src="../images/3.jpg" /></div>
		<div class="side item4"><img src="../images/4.jpg" /></div>
		<div class="side item5"><img src="../images/5.jpg" /></div>
		<div class="side item6"><img src="../images/6.jpg" /></div>
		<div class="side item7"><img src="../images/7.jpg" /></div>
		<div class="side item8"><img src="../images/8.jpg" /></div>
	</div>
</div>
<script>
</script>
</body>
</html>
